{template 'common/header'}
<div class="page-group">
    <div class="page page-current" id="page-goods-list">
		{template 'followed'}
		{template 'common/footbar'}
		<!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓搜索开始↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
		<div class="searchbar row" style="background-color: #f7f7f7;position: fixed;height: 46px;z-index: 1;width: 104%;">
		    <div class="search-input col-80" >
		        <label class="icon icon-search" for="search"></label>
		     	<input style="margin-left: 5px;" type="search" id='search' placeholder='输入关键字...'/>
		    </div>
		    <a class="button button-fill button-primary col-20" style="margin-left: 8px;" id="button_search">搜索</a>
		</div>
		<!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑搜索结束↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
		<!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓条件分类开始↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
    	<ul class="c_goods_title c_newgoods_title" style="top:46px;z-index:15;">
	        <li class="c_hot_color" val-data="fast">最快</li>
	        <li val-data="new">最新</li>
	        <li val-data="hot">最热</li>
	        <li val-data="priceup">价格 <i class="fa fa-long-arrow-up"></i></li>
	        <li val-data="pricedown">价格 <i class="fa fa-long-arrow-down"></i></li>
	    </ul> 
	    <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑条件分类结束↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
	    <!-- ↓↓↓↓↓商品分类开始↓↓↓↓↓ -->
        <div class="c_newclassfix_name" style="z-index: 10;">
	        <ul class="c_classfix_name c_newclassfix_name_con" id="dataClass" style="height: {php echo sizeof($category)*40+40}px;">	      
	         	<li data-val="all" class="c_new_color">全部商品</li>
	         	{loop $category $item}
        		<li data-val='{$item['id']}'>{$item['name']}</li>
        		{/loop}
	        </ul>
	    </div>
	    <!-- ↑↑↑↑↑商品分类结束↑↑↑↑↑ -->
		<div class="content infinite-scroll native-scroll" data-distance="100" style="background-color: white;">
		    <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓商品开始↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
		    <div class="c_all_classfix">
		        <div class="c_classfix_goods" style="padding-top:90px">
		           	<div id="dataList">				         	  
		         	<!-- ↓↓↓↓↓商品加载开始↓↓↓↓↓ -->   
		           	
		           	<!-- ↑↑↑↑↑商品加载结束↑↑↑↑↑ -->
		           	</div>
		           	<!-- ↓↓↓↓↓加载刷新动画开始↓↓↓↓↓ --> 
				  	<div class="infinite-scroll-preloader" id="preloader">
				      	上拉、试试
				    </div>
					<!-- ↑↑↑↑↑加载刷新动画结束↑↑↑↑↑ -->
		        </div>
		    </div>
		    <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑商品结束↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
		</div>
	</div>
</div>
</body>
<!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓商品嵌入模块开始↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
<script type="text/html" id="goodslist">
	{{# for(var i = 0, len = d.result.length; i < len; i++){ }}
	<div class="c_classfix_goods_out" style="height: 200px;">
   		<div class="c_img_goods">
   			<a href="{php echo $this->createMobileUrl('detail')}&id={{ d.result[i].id }}">
   				<img id="img_{{ d.result[i].id }}" data-original="{{ d.result[i].picarr }}" class="img-responsive lazy1" style="width: 108px; display: block;height: 108px;" alt="{{ d.result[i].title }}" src="{{ d.result[i].picarr }}">
   			</a>
   		</div>
   		<a href="#">(第{{ d.result[i].periods }}期){{ d.result[i].title }}</a>
   		<div class="c_shopping_cart">
   			<div class="c_progress_outbox">
   				<p>总需   <i>{{ d.result[i].zong_codes }}</i></p>
   				<div class="c_progress_box c_progress">
   					<span style="width:{{ d.result[i].scale }}%"></span>
   				</div>
   				<p>剩余   <i>{{ d.result[i].shengyu_codes }}</i></p>
   			</div>
   			<div class="c_addshopping_cart c_newshopping_cart" onclick="addToCart('{{ d.result[i].period_number }}','{{ d.result[i].title }}')"></div>
   		</div>
   	</div>
	{{# } }}
</script>
<!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑商品嵌入模块结束↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
<script>
	$(function() {
		'use strict';
		//商品列表页
		$(document).on("pageInit", "#page-goods-list", function(e, id, page) {			
			/***********加载商品数据方法***********/
			var page_goods = 0;
			var op_goods = 'all';
			var oop_goods = 'fast';
			var flag_goods = 0;		//数据加载完成标记
			var search_goods = '';	//初始化搜索参数
			
			function addGoodsItems(page,op,oop,search){
				document.getElementById('preloader').innerHTML = '<div class="preloader"></div>';	//开启加载动态
				var goodsAjaxUrl = "{php echo $this->createMobileUrl('allgoods')}"+"&op="+ op +"&page="+ page +"&oop=" + oop + "&search=" + search;
				$.ajax({
					type: "POST",
					url: goodsAjaxUrl,
					dataType: 'json',
					beforeSend: function(XMLHttpRequest) {},
					success: function(data) {
						if (data.result.length > 0) {
							var gettpl = document.getElementById('goodslist').innerHTML;
							laytpl(gettpl).render(data, function(html){
							    $("#dataList").append(html);
							    document.getElementById('preloader').innerHTML = '上拉加载更多';		//关闭加载动态
							});
						} else {
							document.getElementById('preloader').innerHTML = '商品已加载完成';
							flag_goods = 1;		//刷新数据完成
						}
					},
					error: function() {
						$('.error').show();
					}
				});
				
			}
			addGoodsItems(page_goods,op_goods,oop_goods,search_goods);	//第一次进入加载
			
			/************商品类别方法************/
			$('.c_goods_title').find('li').click(function(){
				var oop = $(this).attr('val-data');
				$(this).addClass('c_hot_color').siblings().removeClass('c_hot_color');	//移除class
				document.getElementById('dataList').innerHTML = '';	//清空原有商品
				oop_goods = oop;		//重新定义全局变量
				page_goods = 0;		//重新定义全局变量
				flag_goods = 0;		//初始化数据加载完成标记
				addGoodsItems(page_goods,op_goods,oop_goods,search_goods);
			});
			$('#dataClass').find('li').click(function(){
				var op = $(this).attr('data-val');
				$(this).addClass('c_new_color').siblings().removeClass('c_new_color');	//移除class
				document.getElementById('dataList').innerHTML = '';	//清空原有商品
				op_goods = op;		//重新定义全局变量
				page_goods = 0;		//重新定义全局变量
				flag_goods = 0;		//初始化数据加载完成标记
				addGoodsItems(page_goods,op_goods,oop_goods,search_goods);
			});
			/**********商品搜索*********/
			$('#button_search').click(function(){
				var search = $("#search").val();	//获取搜索框数据
				search_goods = search;		//重新赋值
				if(search_goods == ''){
					$.toast('输入搜索参数');
					return false;
				}else{
					document.getElementById('dataList').innerHTML = '';	//清空原有商品
					addGoodsItems(page_goods,op_goods,oop_goods,search_goods);	//执行方法
				}
			});
			/**********刷新加载商品**********/
			$(page).on('infinite', function() {
				page_goods++;
				if(flag_goods == 0){
					addGoodsItems(page_goods,op_goods,oop_goods,search_goods);
				}
			});
		});
		$.init();
	});
</script>
<script>
$(function() {
	var hei = '{php echo sizeof($category)*40+40}';
	if(hei > $(window).height() - 140){
		slideNav();
	}
});
function slideNav() {
    $(window).resize(function() {
        $(".c_newclassfix_name_con").css({
            height: $(window).height() - 140 + "px"
        });
    });
    $(window).resize();
}
//添加购物车
function addToCart(periodnumber,title){
	
	$.post("{php echo $this->createMobileUrl('cart',array('op'=>'tocart'))}"
		,{periodnumber:periodnumber,title:title}
		,function(d){
			if(d.result==1){
				$.toast('添加到购物车成功');
				$('#c_total_num').html(d.num);
			}
		}
		,"json"
	);
}
</script>
</html>